import { createApp, defineAsyncComponent, markRaw } from 'vue'
import mainImports from '@/main-imports'

const initComment = function (component, props) {
    // 创建组件
    const customerComponent = createApp(component, props)

    mainImports.initVue(customerComponent)

    customerComponent.mount("#customer-component")

    // customerComponent.remove = () => {
    //     el.removeChild(customerComponent.$el)
    //     customerComponent.$destroy()
    // }
    return customerComponent
}

const component = (app, name, comp) => {
    if (comp) {
        app.component(name, comp)
    }
    return app.component(name)
}

const config = (app, config) => {
    app.config = config
}

const directive = (app, name, direct = {
    mounted(el) {
        console.log(el)
    }
}) => {
    if (direct) {
        app.directive(name, direct)
    }
    app.directive(name)
}

const createComponent = (component) => {
    if (component instanceof String) {
        return defineAsyncComponent(() => import(component))
    } else {
        return defineAsyncComponent(component)
    }
}

export default {
    initComment,
    component,
    config,
    directive,
    createComponent,
    markRaw
}